<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:cc="http://java.sun.com/jsf/composite/customcomponents"
	contentType="text/html">
	
	<h:head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title><h:outputText value="#{label['exampleEvents.title']} - #{label['appNameTitle']}"/></title>
	</h:head>	
	<h:body>
		<cc:LatamHeader userInfo="true">
			<cc:AppHeaderMenu/>
		</cc:LatamHeader>

		<h:form>
			<p:growl widgetVar="growl" showDetail="true" sticky="false" life="4000"/>
			<p:panel styleClass="latam_body_panel">
				<p:fieldset
					legend="#{label['exampleEvents.label.panelTitle']}">							
					<h:form>
						<h:panelGrid columnClasses="label, value" columns="2" styleClass="grid">
							<h:outputText value="#{label['exampleEvents.label.message']} :" escape="false"/>		
							<p:inputText value="#{exampleEventSender.text}"/>
							<f:facet name="footer">
								<p:commandButton value="#{label['exampleEvents.action.send']}" actionListener="#{exampleEventSender.send}"/>
							</f:facet>
						</h:panelGrid>
					</h:form> 
				</p:fieldset>	
			</p:panel>
		</h:form>		

		<cc:LatamFooter/>
		<p:socket onMessage="handleMessage" channel="/helloEvents" autoConnect="true" />    
		
		<script type="text/javascript">  		    
			function handleMessage(facesmessage) {
				facesmessage.severity = 'info';
			    growl.renderMessage( facesmessage );
			}
		</script>
	</h:body>
</f:view>